<template>
  <div class="gantt_task__wrapper">
    <section class="setting-item vertical" @click="resetGantt">
      <i class="iconfont icon-reset" />
      <span>刷新</span>
    </section>
    <section
      ref="search"
      :class="{
        'setting-item': true,
        collapse: isCollapse.search
      }"
    >
      <div class="setting-button" @click="updateItemCollapse('search')">
        <i class="iconfont icon-search" />
        <span>搜索</span>
      </div>
      <el-input v-model="selectQuery" size="mini" placeholder="请输入查询条件" clearable />
    </section>
    <section class="setting-item vertical" @click="addTask">
      <i class="iconfont icon-add_task" />
      <span>新增</span>
    </section>
    <section class="setting-item vertical" @click="openSelectMenu('select_download')">
      <i class="iconfont icon-download" />
      <span>导出</span>
      <el-select
        ref="select_download"
        v-model="output_type"
        size="mini"
        width="100"
        placeholder="请选择"
        @change="exportGantt"
      >
        <el-option
          v-for="item in output_types"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </section>
    <excel-export v-if="isOEMPanelShow" @onOEMClose="onOEMClose" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Emit, Ref, Watch, Prop } from 'vue-property-decorator'
import { Dictionary } from '@/interface/Basic'
import { SelectOptionsType } from '@/interface/ElementUI'
import ExcelExport from '@/components/dashboard/ExcelExport.vue'
@Component({
  components: {
    ExcelExport
  }
})
class GanttTask extends Vue {
  @Ref() select_download!: HTMLElement
  @Ref() search!: HTMLElement
  @Ref() OEM!: HTMLElement
  @Prop({ default: '' }) searchQuery!: string
  isCollapse: Dictionary<boolean> = {
    search: true
  }
  // 导出功能
  output_type: string = ''
  output_types: SelectOptionsType<string> = [
    { label: '图片', value: 'png' },
    { label: '表格', value: 'excel' },
    { label: 'PDF', value: 'pdf' }
  ]
  // 搜索功能
  selectQuery: string = ''
  // OEM 导出功能
  isOEMPanelShow: boolean = false
  @Emit('onQueryChange')
  @Watch('selectQuery')
  sq_handler(newVal: string) {
    return newVal
  }
  @Emit('onGanttRefresh')
  resetGantt() {
    return
  }
  @Emit('onTaskAdd')
  addTask() {
    return
  }
  @Emit('onExportGantt')
  exportGantt() {
    if (this.output_type === 'excel') {
      this.isOEMPanelShow = true
    }
    return this.output_type
  }
  @Watch('searchQuery')
  seq_handler(newVal: string) {
    if (newVal === this.selectQuery) return
    else {
      this.selectQuery = newVal
      this.isCollapse = { ...this.isCollapse, ...{ search: false } }
      // navigator.clipboard.writeText(newVal).then(() => {
      //   this.$message({
      //     type: 'success',
      //     message: `${newVal}已被复制到剪贴板`
      //   })
      // })
    }
  }
  openSelectMenu(domname: 'select_download') {
    const select = this[domname] as any
    select.toggleMenu()
  }
  updateItemCollapse(key: 'search') {
    const collapse_item = this[key] as HTMLElement
    const fisrt_width = collapse_item.getBoundingClientRect().width
    this.$set(this.isCollapse, key, !this.isCollapse[key])
    this.$nextTick(() => {
      const last_width = collapse_item.getBoundingClientRect().width
      collapse_item.animate([{ width: fisrt_width + 'px' }, { width: last_width + 'px' }], {
        duration: 200,
        easing: 'ease'
      })
    })
  }
  onOEMClose() {
    this.output_type = ''
    this.isOEMPanelShow = false
  }
}
export default GanttTask
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.gantt_task__wrapper {
  box-sizing: border-box;
  padding-top: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: all 0.5s ease;
  .setting-item {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 3px;
    font-size: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    #text-color(--primary-text-color);
    i {
      font-size: 20px;
    }
    span {
      white-space: nowrap;
    }
    /deep/.el-select {
      position: absolute;
      left: 0;
      top: 0;
      width: 30px !important;
      .el-select__tags {
        display: none;
      }
      .el-input {
        visibility: hidden;
      }
    }
    .setting-button {
      margin-right: 5px;
      #flex(column, center, space-betwwen);
    }
  }
  .vertical {
    flex-direction: column;
  }
  .collapse {
    width: 32px;
    overflow: hidden;
  }
  .setting-item:hover {
    #bg-color(--primary-hover-text-color);
  }
}
.el-select {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px !important;
  .el-select__tags {
    display: none;
  }
  .el-input {
    visibility: hidden;
  }
}
</style>
